<template>
  <div class="near">
    <div class="hd-title">
      <span class="tit"><i class="iconfont">&#xe630;</i>附近商家</span>
    </div>
    <div class="items">
      <ul class="nearShop" v-if="shopLis.length > 0">
        <li class="item" v-for="item in shopLis" :key="item.id" @click="goShop">
          <div class="near-l">
            <div class="detail">
              <h2 class="overflow">{{ item.name }}</h2>
              <span class="shopNum"
                ><i class="iconfont star">&#xe604;</i
                ><strong>{{ item.rating }}</strong
                >月售{{ item.rating_count }}单</span
              >
              <p class="runPrice">
                <span>¥{{ item.float_minimum_order_amount }}起送</span>
                <i>/</i>
                <span>配送费约¥{{ item.float_delivery_fee }}</span>
              </p>
            </div>
          </div>
          <div class="near-r">
            <ul class="shop_detail_ul">
              <li v-for="(i, index) in item.supports" :key="index">
                {{ i.icon_name }}
              </li>
            </ul>
            <span>{{ item.delivery_mode.text }}</span>
          </div>
        </li>
      </ul>
      <ul v-else>
        <li><img src="../../assets/images/shop_back.svg" alt="" /></li>
        <li><img src="../../assets/images/shop_back.svg" alt="" /></li>
        <li><img src="../../assets/images/shop_back.svg" alt="" /></li>
        <li><img src="../../assets/images/shop_back.svg" alt="" /></li>
        <li><img src="../../assets/images/shop_back.svg" alt="" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ['shopLis'],
  data() {
    return {
      baseImgUrl: 'http://cangdu.org:8001/img/'
    }
  },
  methods: {
    goShop() {
      this.$router.push('/shop')
    }
  }
}
</script>

<style lang="less" scoped>
.items {
  padding-bottom: 0.2rem;
  .item {
    padding-bottom: 0.4rem;
    &:last-child {
      padding-bottom: 1.5rem;
    }
  }
}
.near {
  background-color: #fff;
  margin-top: 0.3rem;
}
.tit {
  font-size: 0.38rem;
  padding-left: 0.15rem;
  color: #999;
  display: block;
  padding: 0.2rem 0;
  i {
    font-size: 0.65rem;
    vertical-align: middle;
    padding-right: 0.1rem;
  }
}
.nearShop {
  .near-l {
    .detail {
      float: left;
      padding-left: 0.3rem;
      h2 {
        color: #000;
        font-weight: 550;
        font-size: 0.45rem;
        width: 4rem;
        &::before {
          content: '品牌';
          height: 0.4rem;
          width: 0.6rem;
          background-color: #ffd930;
          font-size: 0.3rem;
          border-radius: 10%;
          margin: 0 0.15rem;
        }
      }
      .shopNum {
        display: inline-block;
        color: #666;
        font-size: 0.2rem;
        margin: 0.36rem 0 0.26rem 0;
        strong {
          color: red;
          padding: 0 0.1rem;
        }
      }
      .star {
        color: #ffd930;
        font-size: 0.4rem;
      }
      .runPrice {
        color: #666;
        font-size: 0.3rem;
        i {
          padding: 0 0.1rem;
        }
      }
    }
  }
  .shop_detail_ul {
    li {
      border: 0.02rem solid #ccc;
      padding: 0;
      float: left;
      &:nth-child(2) {
        margin: 0 0.1rem;
      }
    }
  }
  .near-r {
    padding-right: 0.1rem;
    span {
      display: block;
      border: 0.02rem solid #ccc;
      color: #999;
      margin-top: 0.9rem;
      font-size: 0.2rem;
      text-align: center;
    }
  }
  li {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.2rem;
  }
  .pic-l {
    float: left;
    img {
      width: 2rem;
      height: 2rem;
    }
  }
}
</style>
